<template>
  <!-- @focus="myinput.select()" -->
  <!-- {{ data }} -->
  <el-input v-if="data.input" id="comInput" v-model="data.value" @change="inputFn" size="small"
    :style="{ width: `${data.w}px` }" />
  <el-select v-else v-model="data.value" @change="val => data.fn(val)" size="small" :style="{ width: `${data.w}px` }">
    <el-option v-for="item in data.options" :key="item.value" :value="item.value" />
  </el-select>
</template>

<script setup>
import { ElMessageBox } from 'element-plus';
import { nextTick } from 'vue';

const { data } = defineProps(['data'])


function inputFn(val) {
  let reg = /^[a-zA-Z]+$/
  if (!reg.test(val)) return ElMessageBox.alert('只能输入英文字母', '提示')
  data.fn(val)
}

data.input && nextTick((e = document.getElementById('comInput')) => {
  e.focus()
  e.setSelectionRange(0, e.value.length)
})
</script>

<style scoped></style>
